<template>
  <div class="searchComonents">
    <div class="search_top">
      <div class="search_back" @click="e_searchback"></div>
      <div class="search_inputContainer">
        <div class="search_inputIcon"></div>
        <input class="search_input" type="text" v-model="text" autofocus placeholder="请输入要搜索的商品">
      </div>
      <div class="search_btn" @click="_skipList">搜索</div>
    </div>
    <div class="search_bottom">
      <div class="search_bottomTitle">
        <span>热门搜索</span>
      </div>
      <div class="search_bottomTags">
        <div class="search_item" v-for="(item, i) in hotList" :key="i">
          <Tag :color="colorList[i]">{{item.shopName}}</Tag>
          <div class="search_fc" @click="_hotSearch(item.shopName)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'

  export default {
    name: 'search',
    data() {
      return {
        text: '', //搜索
        hotList: [],
        colorList: ['volcano', 'orange', 'gold', 'yellow', 'lime', 'green', 'cyan'],
      }
    },

    components: {},

    computed: {},

    methods: {
      e_searchback() {
        this.$router.back(-1)
      },
      // 搜索
      _skipList() {
        if (this.text === '') {
          return
        } else {
          this.$router.push({
            name: 'List',
            path: '/list',
            query: {
              name: this.text,
            },
          })
        }
      },
      /**
       * 获得热门搜索
       * @private
       */
      _getHotSearch() {
        gpost(vlink.hotSearch).then(re => {
          if (re.status === 0) {
            this.hotList = re.data
          }
        })
      },
      _hotSearch(name) {
        this.text = name
        this._skipList()
      }
    },

    mounted() {
      this._getHotSearch()
    },
  }
</script>
<style>

  .search_bottomTags {
    display: flex;
    flex-wrap: wrap;
  }

  .search_bottomTags .search_item {
    position: relative;
    margin: 5px 8px 5px 0;
  }

  .search_bottomTags .search_item .search_fc {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .ivu-tag {
    margin: 0;
  }
</style>
